.iconmqj {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 83px;
  color: #fff;
  position: fixed;
  left: 12px;
  top: -15px;
  z-index: 99999999;
  transition: 0.35s ease 0.35s;
  -webkit-transition: 0.35s ease 0.35s;
}
#audio_btn {
  position: fixed;
  z-index: 999999;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  img {
    width: 100%;
  }
}
.swiper-container {
  max-width: 750px;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#mqj-swiper {
  height: 100%;
  overflow: hidden;
  .swiper-slide {
    height: 100%;
    overflow: hidden;
  }
  .slide-container {
    width: 100%;
    padding-bottom: 200%;
    background: -webkit-linear-gradient(
      #93c7ff,
      #2a7aff
    ); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#93c7ff, #2a7aff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#93c7ff, #2a7aff); /* Firefox 3.6 - 15 */
    background: linear-gradient(#93c7ff, #2a7aff);
    position: relative;
    .slide-main {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      .mqj-light {
        width: 220%;
        height: 110%;
        left: -60%;
        top: -5%;
        position: absolute;
        z-index: 2;
        img {
          width: 100%;
          height: 100%;
          animation: circle 15s infinite linear;
          -webkit-animation: circle 15s infinite linear;
        }
      }
      .mqj-light-p2 {
        left: -65%;
        top: -16%;
      }
      .mqj-light-p3 {
        left: -37%;
        top: -5%;
      }
      .mqj-light-p4 {
        left: -60%;
        top: -5%;
      }
      .mqj-light-p5 {
        left: -47%;
        top: -5%;
      }
      .mqj-light-p6 {
        left: -58%;
        top: -4%;
      }
      .mqj-light-p7 {
        left: -60%;
        top: 3%;
      }
      .mqj-cloud {
        width: 133.33%;
        left: -16.66%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 6;
        overflow: hidden;
        .mqj-cloud-p2 {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          animation: move-lr 10s infinite linear;
          -webkit-animation: move-lr 10s infinite linear;
        }
        svg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .mqj-cloud01 {
          z-index: 3;
          animation: move-lr 10s infinite linear;
          -webkit-animation: move-lr 10s infinite linear;
        }
        .mqj-cloud02 {
          left: -6%;
          z-index: 4;
          animation: move-ll 10s infinite linear;
          -webkit-animation: move-ll 10s infinite linear;
        }
        .mqj-cloud03 {
          z-index: 5;
          animation: move-lr 15s infinite linear;
          -webkit-animation: move-lr 15s infinite linear;
        }
      }
      .mqj-wanju {
        position: absolute;
        width: 72%;
        left: 14%;
        top: 32%;
        animation: shake-up 15s infinite linear;
        -webkit-animation: shake-up 15s infinite linear;
        img {
          width: 100%;
        }
      }
      .mqj-xuegao1 {
        width: 16.2%;
        position: absolute;
        z-index: 88;
        right: 0;
        top: 53%;
        animation: shake-up 15s 0.5s infinite linear;
        -webkit-animation: shake-up 15s 1s infinite linear;
        img {
          width: 100%;
        }
      }
      .mqj-xuegao2 {
        width: 6.2%;
        position: absolute;
        z-index: 88;
        left: 0;
        top: 46.6%;
        animation: shake-up 10s 1s infinite linear;
        -webkit-animation: shake-up 10s 1s infinite linear;
        img {
          width: 100%;
        }
      }
      .mqj-xuegao3 {
        width: 18.8%;
        position: absolute;
        z-index: 88;
        animation: shake-up 12s 2s infinite linear;
        -webkit-animation: shake-up 12s 1s infinite linear;
        left: 0;
        top: 3.4%;
        img {
          width: 100%;
        }
      }
      .mqj-title {
        width: 52.6%;
        height: 11.3%;
        position: absolute;
        top: 14.6%;
        left: 23.8%;
        img.mqj-title-bg {
          width: 100%;
        }
        .mqj-title-imgt {
          position: absolute;
          width: 127px;
          left: 50%;
          top: -26%;
          margin-left: -63px;
          font-size: 18px;
          background: #5492e5;
          border-radius: 50px;
          padding-top: 3px;
          padding-bottom: 3px;
          color: #fff;
        }
        .mqj-title-img1 {
          position: absolute;
          width: 29.3%;
          left: 4%;
          top: 18%;
        }
        .mqj-title-img2 {
          position: absolute;
          width: 29.6%;
          left: 33.3%;
          top: 20%;
        }
        .mqj-title-img3 {
          position: absolute;
          width: 27.8%;
          left: 66%;
          top: 11%;
        }
      }
      .mqj-title-p2 {
        width: 84.4%;
        height: 11.3%;
        position: absolute;
        top: 16.6%;
        left: 7.8%;
        img.mqj-title-bg {
          width: 100%;
        }
        .mqj-title-img1 {
          position: absolute;
          width: 15.7%;
          left: 4.5%;
          top: 18%;
        }
        .mqj-title-img2 {
          position: absolute;
          width: 14.7%;
          left: 25%;
          top: 20%;
        }
        .mqj-title-img3 {
          position: absolute;
          width: 15.6%;
          left: 42.3%;
          top: 17%;
        }
        .mqj-title-img4 {
          position: absolute;
          width: 15.3%;
          left: 60%;
          top: 17%;
        }
        .mqj-title-img5 {
          position: absolute;
          width: 18%;
          left: 78%;
          top: 12%;
        }
      }
      .mqj-title-p3 {
        width: 78%;
        left: 11%;
        top: 15.6%;
        z-index: 2;
        img.mqj-title-img1 {
          position: absolute;
          width: 100%;
          left: 0;
          top: 10%;
        }
      }
      .mqj-title-p4 {
        width: 52.6%;
        left: 23.8%;
        top: 15.6%;
        z-index: 2;
        .mqj-title-img1 {
          width: 29.3%;
          left: 4%;
          top: 22%;
        }
        .mqj-title-img2 {
          position: absolute;
          width: 27.6%;
          left: 33.3%;
          top: 18%;
        }
        .mqj-title-img3 {
          position: absolute;
          width: 34.8%;
          left: 61%;
          top: 8%;
        }
      }
      .mqj-title-p5 {
        width: 70%;
        left: 15%;
        top: 15.6%;
        z-index: 2;
        .mqj-title-bg {
          margin-top: 10px;
        }
        .mqj-title-img1 {
          position: absolute;
          width: 24%;
          left: 4%;
          top: 31%;
        }
        .mqj-title-img2 {
          position: absolute;
          width: 22%;
          left: 27%;
          top: 28%;
        }
        .mqj-title-img3 {
          position: absolute;
          width: 23%;
          left: 48%;
          top: 26%;
        }
        .mqj-title-img4 {
          position: absolute;
          width: 22%;
          left: 72%;
          top: 26%;
        }
      }
      .mqj-title-p7 {
        width: 52.6%;
        left: 23.8%;
        top: 15.6%;
        z-index: 2;
        .mqj-title-img1 {
          width: 29.3%;
          left: 4%;
          top: 24%;
        }
        .mqj-title-img2 {
          position: absolute;
          width: 27.6%;
          left: 35%;
          top: 22%;
        }
        .mqj-title-img3 {
          position: absolute;
          width: 30.8%;
          left: 63%;
          top: 10%;
        }
      }
      .mqj-mum {
        width: 41.6%;
        left: 29.2%;
        top: 32.2%;
        position: absolute;
        z-index: 99;
        img {
          width: 100%;
        }
      }
      .mqj-mum-p2 {
        width: 46%;
        position: absolute;
        right: 0;
        top: 38%;
        z-index: 3;
        img {
          width: 100%;
        }
      }
      .mqj-mum-p3 {
        width: 39.6%;
        position: absolute;
        right: 14%;
        top: 28%;
        z-index: 3;
        img {
          width: 100%;
        }
      }
      .mqj-mum-p4 {
        width: 82%;
        position: absolute;
        right: 6%;
        top: 33%;
        z-index: 8;
        img {
          width: 100%;
        }
      }
      .mqj-mum-p5 {
        width: 63.2%;
        position: absolute;
        right: 18%;
        top: 29%;
        z-index: 8;
        img {
          width: 100%;
        }
      }
      .mqj-mum-p6 {
        width: 38%;
        position: absolute;
        right: 30%;
        top: 29.6%;
        z-index: 8;
        img {
          width: 100%;
        }
      }
      .mqj-mum-p7 {
        width: 56%;
        position: absolute;
        right: 21%;
        top: 31%;
        z-index: 2;
        img {
          width: 100%;
        }
      }
      .mqj-child-p2 {
        width: 45.6%;
        position: absolute;
        top: 28.8%;
        left: 13%;
        z-index: 2;
        img {
          width: 100%;
        }
      }
      .top-circle {
        width: 150%;
        height: 75%;
        border-radius: 100%;
        background: #fff;
        position: absolute;
        top: -40%;
        opacity: 0.7;
        z-index: 1;
      }
      .top-circle-1 {
        left: -75%;
        animation: move-lr 10s infinite linear;
        -webkit-animation: move-lr 10s infinite linear;
      }
      .top-circle-2 {
        left: -25%;
        animation: move-ll 10s infinite linear;
        -webkit-animation: move-ll 10s infinite linear;
      }
      .top-circle-3 {
        left: 25%;
        animation: move-lr 10s infinite linear;
        -webkit-animation: move-lr 10s infinite linear;
      }
      .mqj-shit-p3 {
        height: 40%;
        width: 27.2%;
        position: absolute;
        top: 31%;
        left: 10.8%;
        z-index: 6;
        img {
          position: absolute;
          &:first-child {
            top: 85%;
            left: 0;
            width: 54%;
            left: 50%;
          }
          &:nth-child(2) {
            top: 65%;
            width: 82%;
            left: 20%;
          }
          &:nth-child(3) {
            top: 40%;
            width: 93%;
            left: -2%;
          }
          &:last-child {
            top: 0%;
            width: 96%;
            left: 0;
          }
        }
      }
      .mqj-words {
        width: 80%;
        left: 10%;
        height: 7%;
        position: absolute;
        top: 26%;
        .mqj-wordsa {
          position: absolute;
          top: 0;
        }
        .mqj-wordsa01 {
          width: 10.8%;
          top: 0;
          left: 0;
        }
        .mqj-wordsa02 {
          width: 29%;
          top: 2%;
          left: 8.4%;
        }
        .mqj-wordsa03 {
          width: 9.5%;
          top: 18%;
          left: 36%;
        }
        .mqj-wordsa04 {
          width: 11.3%;
          top: 5%;
          left: 44%;
        }
        .mqj-wordsa05 {
          width: 11.2%;
          top: 4.1%;
          left: 53.2%;
        }
        .mqj-wordsa06 {
          width: 12.5%;
          top: 0;
          left: 62.88%;
        }
        .mqj-wordsa07 {
          width: 12.6%;
          top: 0;
          left: 73.5%;
        }
        .mqj-wordsa08 {
          width: 12.5%;
          top: 0;
          left: 85%;
        }
        .mqj-wordsa09 {
          width: 7.3%;
          top: 0;
          left: 96%;
        }
      }
      .mqj-words-p2 {
        width: 41%;
        left: 6%;
        top: 60%;
        position: absolute;
        img {
          width: 100%;
        }
      }
      .mqj-words-p3 {
        width: 80%;
        left: 10%;
        top: 23%;
        position: absolute;
        z-index: 7;
        img {
          width: 100%;
        }
      }
      .mqj-words-p4 {
        width: 73%;
        left: 13.5%;
        height: 25%;
        top: 25.5%;
        position: absolute;
        z-index: 7;
        .mqj-wordsa {
          position: absolute;
          top: 0;
        }
        .mqj-wordsa01 {
          width: 25%;
          top: 8%;
          left: 0%;
        }
        .mqj-wordsa02 {
          width: 33%;
          top: 1%;
          left: 32.4%;
        }
        .mqj-wordsa03 {
          width: 16%;
          top: 8%;
          left: 68%;
        }
        .mqj-wordsa04 {
          width: 16%;
          top: 5%;
          left: 84%;
        }
      }
      .mqj-words-l {
        position: absolute;
        width: 28.2%;
        left: 5%;
        top: 33%;
        z-index: 999;
        img {
          width: 100%;
        }
      }
      .mqj-words-lp4 {
        position: absolute;
        width: 15.6%;
        left: 8%;
        top: 63%;
        z-index: 999;
        animation: shake-up 15s infinite linear;
        -webkit-animation: shake-up 15s infinite linear;
        img {
          width: 100%;
        }
      }
      .mqj-words-r {
        position: absolute;
        width: 33%;
        left: 60%;
        top: 33%;
        z-index: 999;
        img {
          width: 100%;
        }
      }
      .mqj-words-rp4 {
        position: absolute;
        width: 10%;
        left: 81%;
        top: 56%;
        z-index: 999;
        animation: shake-up 15s infinite linear;
        -webkit-animation: shake-up 15s infinite linear;
        img {
          width: 100%;
        }
      }
      .mqj-words-rap4 {
        position: absolute;
        width: 34%;
        left: 62%;
        top: 60%;
        z-index: 999;
        img {
          width: 100%;
        }
      }
      .mqj-words-rap5 {
        position: absolute;
        width: 39%;
        left: 5.6%;
        top: 52.8%;
        z-index: 999;
        img {
          width: 100%;
        }
      }
      .mqj-words-p6 {
        width: 100%;
        position: absolute;
        left: 0;
        top: 30%;
        height: 70%;
        img {
          position: absolute;
          z-index: 12;
        }
        .mqj-words01 {
          width: 46.5%;
          left: 1.8%;
          top: 0;
        }
        .mqj-words02 {
          width: 46.5%;
          left: 1.8%;
          top: 15%;
        }
        .mqj-words03 {
          width: 46.5%;
          left: 1.8%;
          top: 29%;
        }
        .mqj-words04 {
          width: 46.5%;
          left: 1.8%;
          top: 42%;
        }
        .mqj-words05 {
          width: 46.5%;
          left: 48%;
          top: 42%;
        }
        .mqj-words06 {
          width: 46.5%;
          left: 48%;
          top: 29%;
        }
        .mqj-words07 {
          width: 46.5%;
          left: 48%;
          top: 15%;
        }
        .mqj-words08 {
          width: 46.5%;
          left: 48%;
          top: 0%;
        }
      }
      .mqj-words-p7 {
        width: 100%;
        position: absolute;
        left: 0;
        top: 2%;
        height: 70%;
        img {
          position: absolute;
          z-index: 2;
        }
        .mqj-words01 {
          width: 100%;
          left: 0;
          top: 0;
        }
        .mqj-words02 {
          width: 36%;
          left: 5%;
          top: 82%;
          z-index: 4;
        }
      }
      .btn-start {
        width: 66%;
        left: 17%;
        position: absolute;
        top: 78%;
        background: #d9333f;
        color: #fff;
        border-radius: 100px;
        z-index: 99999;
        border: none;
        padding-top: 3%;
        padding-bottom: 3%;
        font-size: 16px;
      }
      .cover {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99998;
      }
      .choose-btn {
        width: 80%;
        left: 10%;
        position: absolute;
        top: 80%;
        z-index: 99999;
        button {
          border-radius: 3px;
          padding-top: 6px;
          padding-left: 33px;
          padding-right: 33px;
          padding-bottom: 6px;
          border: none;
          color: #fff;
          font-size: 21px;
        }
        .choose-btn-y {
          background: #ff688b;
          margin-right: 48px;
        }
        .choose-btn-n {
          background: #18cd86;
        }
      }
    }
  }
}

.mqj-result {
  max-width: 750px;
  margin: 0 auto;
  background: #aaa;
  .result-main {
    padding-bottom: 180%;
    position: relative;
    .result-main-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #fff;
      top: 0;
      left: 0;
      .result-main-bgp1 {
        width: 100%;
        height: 40%;
        overflow: hidden;
        position: relative;
        background: #ffbbc5
          url(../../assets/img/img-find/img-mother/mqj-result-13.png) center
          repeat;
        .mqj-light-result {
          width: 200%;
          height: 250%;
          left: -50%;
          top: -80%;
          position: absolute;
          z-index: 2;
          img {
            width: 100%;
            height: 100%;
            animation: circle 20s infinite linear;
            -webkit-animation: circle 20s infinite linear;
          }
        }
      }
      .result-main-bgp2 {
        width: 100%;
        height: 55%;
        background: #fff;
        position: relative;
        &::before {
          position: absolute;
          width: 100%;
          top: -6px;
          left: 0;
          content: "";
          height: 12px;
          background: url(../../assets/img/img-find/img-mother/mqj-result-12.png)
            top no-repeat;
          background-size: 100%;
        }
        &::after {
          position: absolute;
          width: 100%;
          bottom: -6px;
          left: 0;
          content: "";
          height: 12px;
          background: url(../../assets/img/img-find/img-mother/mqj-result-11.png)
            top no-repeat;
          background-size: 100%;
        }
      }
      .result-main-bgp3 {
        width: 100%;
        height: 5%;
        background: #90c4fe;
      }
    }
    .result-main-contant {
      position: absolute;
      z-index: 66;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .result-title {
        width: 100%;
        height: 105px;
        position: absolute;
        top: 26px;
        .result-title-top {
          width: 40%;
          margin-left: 30%;
          height: 38px;
          text-align: center;
          background: url(../../assets/img/img-find/img-mother/mqj-result-01.png)
            center no-repeat;
          background-size: 100%;
          p {
            width: 100%;
            line-height: 35px;
            color: #fff;
            font-size: 23px;
          }
        }
        .result-titleimg {
          position: absolute;
          top: 48px;
          width: 14%;
        }
        .result-titleimg-01 {
          left: 20%;
          animation: bounceIn 0.2s 0.5s linear both;
          -webkit-animation: bounceIn 0.2s 0.5s linear both;
        }
        .result-titleimg-02 {
          left: 35%;
          animation: bounceIn 0.2s 0.7s linear both;
          -webkit-animation: bounceIn 0.2s 0.7s linear both;
        }
        .result-titleimg-03 {
          left: 50%;
          animation: bounceIn 0.2s 0.9s linear both;
          -webkit-animation: bounceIn 0.2s 0.9s linear both;
        }
        .result-titleimg-04 {
          left: 65%;
          animation: bounceIn 0.2s 1.1s linear both;
          -webkit-animation: bounceIn 0.2s 1.1s linear both;
        }
      }
      .result-star {
        width: 100%;
        height: 23px;
        position: absolute;
        left: 0;
        top: 141px;
        text-align: center;
        p {
          font-size: 18px;
          list-style: 23px;
          display: inline-block;
          color: #ff688b;
          margin-right: 6px;
          animation: zoomInLeft 0.5s 1.5s linear both;
          -webkit-animation: zoomInLeft 0.5s 1.5s linear both;
        }
        .result-star-s {
          display: inline-block;
          vertical-align: bottom;
          animation: flash 0.2s 3.6s linear;
          -webkit-animation: flash 0.2s 3.6s linear;
          img {
            width: 20px;
            margin-right: 3px;
          }
          .animate-star01 {
            animation: bounceIn 0.2s 2.1s linear both;
            -webkit-animation: bounceIn 0.2s 2.1s linear both;
          }
          .animate-star02 {
            animation: bounceIn 0.2s 2.4s linear both;
            -webkit-animation: bounceIn 0.2s 2.4s linear both;
          }
          .animate-star03 {
            animation: bounceIn 0.2s 2.7s linear both;
            -webkit-animation: bounceIn 0.2s 2.7s linear both;
          }
          .animate-star04 {
            animation: bounceIn 0.2s 3s linear both;
            -webkit-animation: bounceIn 0.2s 3s linear both;
          }
          .animate-star05 {
            animation: bounceIn 0.2s 3.3s linear both;
            -webkit-animation: bounceIn 0.2s 3.3s linear both;
          }
        }
      }
      .result-ele-01 {
        width: 27px;
        position: absolute;
        top: 177px;
        left: 117px;
        animation: flash-d 2.2s 0.5s linear infinite both;
        -webkit-animation: flash-d 2.2s 0.5s linear infinite both;
      }
      .result-ele-01c {
        top: 231px;
        left: 143px;
      }
      .result-ele-02 {
        width: 60px;
        position: absolute;
        top: 190px;
        left: 305px;
        animation: move-lr 4.2s 0.5s linear infinite both;
        -webkit-animation: move-lr 4.2s 0.5s linear infinite both;
      }
      .result-ele-02c {
        top: 190px;
        left: 228px;
      }
      .result-ele-03 {
        width: 6.6%;
        position: absolute;
        top: 387px;
        left: 0;
        animation: shake-up 8s 0.5s linear infinite both;
        -webkit-animation: shake-up 8s 0.5s linear infinite both;
      }
      .result-ele-04 {
        width: 68%;
        position: absolute;
        top: 243px;
        left: 65px;
        animation: shake-up 12s 0.5s linear infinite both;
        -webkit-animation: shake-up 12s 0.5s linear infinite both;
      }
      .result-ele-04c {
        top: 300px;
        left: 65px;
      }
      .mum-out {
        width: 100%;
        position: absolute;
        top: 179px;
        left: 0;
        animation: shake-up 12s 1.2s linear infinite both;
        -webkit-animation: shake-up 12s 1.2s linear infinite both;
      }
      .result-ele-05 {
        width: 36%;
        position: absolute;
        top: 0;
        left: 115px;
        animation: zoomIn 0.5s 0.5s linear both;
        -webkit-animation: zoomIn 0.5s 0.5s linear both;
      }
      .result-ele-05c {
        width: 95%;
        left: 8px;
      }
      .result-ele-05d {
        width: 54%;
        left: 87px;
        top: -10px;
      }
      .result-ele-06 {
        width: 100%;
        position: absolute;
        left: 0;
        top: 482px;
        animation: fadeIn 0.5s 1.5s linear both;
        -webkit-animation: fadeIn 0.5s 1.5s linear both;
      }
      .result-btn {
        width: 173px;
        height: 36px;
        left: 31px;
        top: 531px;
        position: absolute;
        background-size: 100%;
        border-radius: 100px;
        border: 4px solid #ff688b;
        color: #fff;
        line-height: 25px;
        word-wrap: break-word;
        box-shadow: 0 4px 0 #b24660;
        animation: shake-up-l 4s 1.2s linear infinite both;
        -webkit-animation: shake-up-l 4s 1.2s linear infinite both;
        &::before {
          content: "领取母亲节礼物";
          position: absolute;
          line-height: 23px;
          width: 100%;
          height: 100%;
          font-size: 18px;
          border-radius: 100px;
          top: 0;
          left: 0;
          background: #ff688b;
          box-sizing: border-box;
          border: 1px rgba($color: #fff, $alpha: 0.75) dashed;
        }
      }
      .result-btn-share {
        left: 218px;
        width: 120px;
        border: 4px solid #18cd86;
        box-shadow: 0 4px 0 #117c52;
        &::before {
          content: "分享";
          background: #18cd86;
        }
      }
      .mqjkl {
        width: 100%;
        height: 75px;
        position: absolute;
        top: 395px;
        left: 0;
        z-index: 67;
        animation: flash-d 3.2s 3.8s infinite linear;
        -webkit-animation: flash-d 3.2s 3.8s infinite linear;
        img {
          position: absolute;
          top: 0;
        }
        .mqjkl-f01 {
          top: 0;
          left: 8%;
          width: 20%;
          animation: zoomInFont01 0.5s 1.8s linear both;
          -webkit-animation: zoomInFont01 0.5s 1.8s linear both;
        }
        .mqjkl-f02 {
          top: 15%;
          left: 26%;
          width: 18.4%;
          animation: zoomInFont02 0.5s 2.1s linear both;
          -webkit-animation: zoomInFont02 0.5s 2.1s linear both;
        }
        .mqjkl-f03 {
          top: 20%;
          left: 45%;
          width: 12.6%;
          animation: zoomInFont03 0.5s 2.4s linear both;
          -webkit-animation: zoomInFont03 0.5s 2.4s linear both;
        }
        .mqjkl-f04 {
          top: 0;
          left: 57%;
          width: 20%;
          animation: zoomInFont04 0.5s 2.7s linear both;
          -webkit-animation: zoomInFont04 0.5s 2.7s linear both;
        }
        .mqjkl-f05 {
          top: 41%;
          left: 75%;
          width: 13%;
          animation: zoomInFont05 0.5s 3s linear both;
          -webkit-animation: zoomInFont05 0.5s 3s linear both;
        }
        .mqjkl-f06 {
          top: 47%;
          left: 87%;
          width: 6%;
          animation: zoomInFont06 0.5s 3.3s linear both;
          -webkit-animation: zoomInFont06 0.5s 3.3s linear both;
        }
      }
      .once-more,
      .share-this {
        width: 112px;
        height: 40px;
        position: absolute;
        border-radius: 6px;
        background: #ff688b;
        border: none;
        font-size: 20px;
        line-height: 40px;
        color: #fff;
        bottom: 45px;
        left: 42px;
      }
      .share-this {
        background: #18cd86;
        left: 220px;
      }
    }
  }
}
.share-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 9999;
  display: none;
  opacity: 0;
  background: hsla(0, 0, 0, 0.9);
  img {
    width: 80%;
    margin-left: 10%;
    margin-top: 10vh;
  }
}
.share-shake-in {
  animation: fadeIn 0.35s linear both;
  -webkit-animation: fadeIn 0.35s linear both;
}
.share-shake-out {
  animation: fadeOut 0.35s linear both;
  -webkit-animation: fadeOut 0.35s linear both;
}
